<template>
  <view class="setInfo">
    <uni-popup ref="popup" type="bottom"  border-radius="10px 10px 0 0">
        <view class="setInfoContent">
            <view class="setInfoTitle">
                <image
                    :src="config?.share_img"
                    mode="scaleToFill"
                />
                <text>设置个人信息</text>
            </view>
            <view class="setInfoItem">
                <text>姓名</text>
                <input type="nickname" v-model="setInfos.nickname" placeholder="请输入姓名" />
            </view>
            <view class="setInfoItem">
                <text>头像</text>
                <button class="setInfoAvatar" open-type="chooseAvatar" @chooseavatar="getupload">
                    <image
                        :src="setInfos?.headerimg||config?.share_img"
                        mode="scaleToFill"
                    />
                </button>
            </view>
            <button  @click="submit" class="blue-linear btn">立即提交</button>
        </view>
    </uni-popup>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user';
import API_CONFIG from '@/api/config'
import { toast, uploadFile } from '@/utils';
const userStore = useUserStore();
const config = ref<any>(userStore.config?.scan)
const emits = defineEmits(["update:modelValue", "submit"])
const popup = ref<any>(null)
const open = () => {
  if (popup.value) {
    popup.value.open()
  }
}
const setInfos = ref({
  nickname: '',
  headerimg: ''
})
const submit = () => {
  if (!setInfos.value.nickname) {
    toast('请输入姓名')
    return
  }
  if (!setInfos.value.headerimg) {
    toast('请上传头像')
    return
  }
  popup.value.close()
  emits("submit", setInfos.value)
}

const getupload = (e: any) => {
  console.log(e)
  uploadFile(e.target.avatarUrl).then((res: any) => {
    setInfos.value.headerimg = res.url
  })
}

defineExpose({
  open,
});
</script>
<style scoped lang="scss">
.setInfo {
  width: 100%;
  height: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  .setInfoContent {
    height: 100%;background: #fff;box-sizing: border-box;
    display: flex;padding: 30rpx;border-radius: 20rpx 20rpx 0 0;
    flex-direction: column;
  }
  .setInfoTitle {
    width: 100%;
    display: flex;
    flex-direction: column;
    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }
    text{
      font-size: 30rpx;
      font-weight: 500;
      color: #333;font-weight: bold;
    }
  }
  .setInfoItem {
    width: 100%;
    display: flex;align-items: center;padding: 30rpx 0;border-bottom: 1rpx solid #f5f5f5;
    text{
      font-size: 26rpx;width: 100rpx;
    } 
    input{
      flex: 1;font-size: 26rpx;
    }
  }
  .setInfoAvatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;background: transparent;margin: 0;padding: 0;
  }
  .setInfoAvatar image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .btn{margin-top: 30rpx;}
}
</style>
